<template>
    <section class="mainSection" style="min-width: 1068px;overflow-x: hidden;">
        <layout :isVertical="true" v-loading="loading">
            <layout layout="center" height="64%" class="dataName" style="padding:0 15px 0 10px;overflow: hidden;">
                <el-row :gutter="20" class="dataName">
                    <el-col :span="16"  class="dataName">
                        <div class="shadowPanel dataName" style="margin:10px 5px 10px 5px;padding-bottom:5px;">
                            <div class="titleContainer">
                                <img class="cinemaImg" src="../../imgs/mapIcon.png" />
                                <span class="titleText">影院地图</span>
                            </div>
                            <div class="mapEcharts" id="mapEcharts" ref="mapEcharts"
                                 :style="{width:mapWidth+'%',height:mapHeight+'px',margin:'auto'}" style="padding-top: 10px;box-sizing: border-box;">
                                <h2>加载中</h2>
                            </div>
                        </div>
                    </el-col>
                    <el-col class="dataNameLeft" :span="8" :style="{height: (mapHeight+60) + 'px'}">
                        <layout style="height: 100%;">
                            <layout layout="center" class="noScrollSection">
                                <layout :isVertical="true">
                                    <layout layout="top" :height="(mapHeight-50)/2+'px'">
                                        <el-row :gutter="20" style="height: 100%;">
                                            <el-col :span="12" style="height: 100%;padding:5px;">
                                                <div class="shadowPanel" style="height: 100%;margin:4px;">
                                                    <div class="titleContainer">
                                                        <img class="cinemaImg"  src="../../imgs/cinema.png" />
                                                        <span class="titleText">业务影院数</span>
                                                    </div>
                                                    <div class="titleValue">
                                                        <div class="titleValue_cen">

                                                        <span class="titleNumber" @click="goCinemaList()">{{homeDta.cinemaCount}}</span>
                                                        <span class="titleUnit">家</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="height: 100%;padding:5px;">
                                                <div class="shadowPanel" style="height: 100%;margin:4px;">
                                                    <div class="titleContainer">
                                                        <img class="cinemaImg"  src="../../imgs/cinema.png" />
                                                        <span class="titleText">业务影厅数</span>
                                                    </div>
                                                    <div class="titleValue">
                                                        <div class="titleValue_cen">
                                                        <span class="titleNumber" @click="goCinemaHallList()">{{homeDta.hallCount}}</span>
                                                        <span class="titleUnit">个</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </layout>
                                    <layout layout="center" class="noScrollSection">
                                        <el-row :gutter="20" style="height: 100%;">
                                            <el-col :span="12" style="height: 100%;padding:5px;">
                                                <div class="shadowPanel" style="height: 100%;margin:4px;">
                                                    <div class="titleContainer">
                                                        <img class="cinemaImg"  src="../../imgs/deviceCountIcon.png" />
                                                        <span class="titleText">业务设备数</span>
                                                    </div>
                                                    <div class="img" style="margin:auto;height:45%;text-align: center;width: 100%;">
                                                        <img src="../../imgs/deviceCount.png"/>
                                                    </div>
                                                    <!-- <div class="grid-content bg-purple"
                                                         style="margin-top:10px;text-align: center;margin-top: 48px;">
                                                        <span style="display: block;color:#444;font-weight: bold;text-align: left;margin-left: 30px;font-size: 16px;font-weight: bold;">服务器</span>
                                                        <div style="height: 80px;line-height: 80px;">
                                                            <span @click="goCinemaDeviceList()"
                                                                style="cursor:pointer;margin:10px;color:#409EFF;font-size:40px;font-weight: bold;">{{homeDta.Server}}</span>
                                                            <span style="color:#444;font-size:16px;font-weight: bold;">台</span>
                                                        </div>
                                                    </div>
                                                    <div class="grid-content bg-purple"
                                                         style="text-align: center;">
                                                        <span style="display: block;color:#444;font-weight: bold;text-align: left;margin-left: 30px;font-size: 16px;font-weight: bold;">放映机</span>
                                                        <div style="height: 80px;line-height: 80px;">
                                                            <span @click="goCinemaDeviceList()"
                                                                style="cursor:pointer;margin:10px;color:#409EFF;font-size:40px;font-weight: bold;">{{homeDta.Projector}}</span>
                                                            <span style="color:#444;font-size:16px;font-weight: bold;">台</span>
                                                        </div>
                                                    </div> -->
                                                    <div class="titleContainer2" style="margin-top: 1%;">
                                                        <span class="titleLabel" style="width: 25%;margin-left: 25px;display: inline-block;">服务器</span>
                                                        <div  style="width: 60%;display: inline-block;text-align: center;">
                                                        <span class="titleNumber" @click="goCinemaDeviceList(1)" style="color:green;">{{homeDta.Server}}</span>
                                                        <span class="titleUnit">台</span>

                                                        </div>
                                                    </div>
                                                    <div class="titleContainer2">
                                                        <span class="titleLabel" style="width: 25%;margin-left: 25px;display: inline-block;">放映机</span>
                                                        <div  style="width: 60%;display: inline-block;text-align: center;">
                                                            <span class="titleNumber" @click="goCinemaDeviceList(2)">{{homeDta.Projector}}</span>
                                                            <span class="titleUnit" >台</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="height: 100%;padding:5px;">
                                                <div class="shadowPanel" style="height: 100%;margin:4px;">
                                                    <div class="titleContainer">
                                                        <img class="cinemaImg"  src="../../imgs/tmsLineIcon.png" />
                                                        <span class="titleText">TMS在线情况</span>
                                                    </div>
                                                    <div class="img" style="height:45%;text-align: center;width: 100%;display: flex;justify-content: center;">
                                                        <!-- <img src="../../imgs/tmsLine.png" /> -->
                                                        <el-progress type="circle" :percentage="percentage(homeDta)"></el-progress>
                                                    </div>
                                                    <div class="titleContainer2" style="margin-top: 1%;">
                                                        <span class="titleLabel" style="width: 20%;margin-left: 25px;display: inline-block;">在线</span>
                                                        <div  style="width: 60%;display: inline-block;text-align: center;">
                                                        <span class="titleNumber" @click="goTmsList(true)" style="color:green;">{{homeDta.onLineCount}}</span>
                                                        <span class="titleUnit">台</span>

                                                        </div>
                                                    </div>
                                                    <div class="titleContainer2">
                                                        <span class="titleLabel" style="width: 20%;margin-left: 25px;display: inline-block;">离线</span>
                                                        <div  style="width: 60%;display: inline-block;text-align: center;">
                                                            <span class="titleNumber" @click="goTmsList(false)">{{homeDta.notOnLineCount}}</span>
                                                            <span class="titleUnit">台</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </layout>
                                </layout>
                            </layout>
                        </layout>
                    </el-col>
                </el-row>
            </layout>
            <layout layout="bottom" height="33%" style="padding: 0px 15px 10px 15px;">
                <layout>
                    <layout layout="center" class="noScrollSection">
                        <layout :isVertical="true">
                            <layout layout="center" class="noScrollSection">
                                <el-row :gutter="20" style="height: 100%;">
                                    <el-col :span="12" style="height: 100%;padding:5px;">
                                        <div class="shadowPanel" style="height: 100%;margin:4px;">
                                            <div class="titleContainer">
                                                <img class="cinemaImg"  src="../../imgs/listIcon.png" />
                                                <span class="titleText">故障情况概览</span>
                                                <el-button type="primary" round class="btnDetail"  @click="goTroubleList()">查看详情</el-button>
                                                <!-- <div class="btnDetail" @click="goTroubleList()">
                                                    查看详情
                                                </div> -->
                                            </div>
                                            <layout style="height: 81%;">
                                                <layout layout="aside" width="223px" style="vertical-align: middle">
                                                    <div class="bottomLabel">涉及影院数</div>
                                                    <div style="text-align:center;height:50px;line-height: 50px;margin-left:5px;color:#409EFF;font-weight: bold;">
                                                        <span style="font-size:48px;width:60%;display: inline-block;color:red;">{{malfunction.cinemaSum}}</span>家
                                                    </div>
                                                    <div class="bottomLabel">当前故障数</div>
                                                    <div style="text-align:center;height:50px;line-height: 50px;color:#409EFF;margin-left:5px;font-weight: bold;">
                                                        <span style="font-size:48px;width:60%;display: inline-block;">{{malfunction.malfunctionSum}}</span>个
                                                    </div>
                                                </layout>
                                                <layout layout="center"
                                                        style="padding:10px;border-radius: 12px;background: #eee;margin:15px;padding:36px 0;background: #F5F5F5;">
                                                    <table style="width:98%;height:100%;text-align:center;">
                                                        <tr style="height:40px;">
                                                            <td class="bottomTableHeader">今日报障</td>
                                                            <td class="bottomTableHeader">已解决</td>
                                                            <td class="bottomTableHeader">待解决</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="bottomTableCell" style="color:#409EFF;">{{malfunction.newSum}}</td>
                                                            <td class="bottomTableCell" style="color:#409EFF;">{{malfunction.solveSum}}</td>
                                                            <td class="bottomTableCell" style="color:red;">{{malfunction.unsolvedSum}}</td>
                                                        </tr>
                                                    </table>
                                                </layout>
                                            </layout>
                                        </div>
                                    </el-col>
                                    <el-col :span="12" style="height: 100%;padding:5px;">
                                        <div class="shadowPanel" style="height: 100%;margin:4px;">
                                            <div class="titleContainer">
                                                <img class="cinemaImg"  src="../../imgs/listIconsc.png" />
                                                <span class="titleText">排期情况概览</span>
                                                <el-button type="primary" class="btnDetail" round  @click="goSchedulesList()">查看详情</el-button>
                                                <!-- <div class="btnDetail" @click="goSchedulesList()">
                                                    查看详情
                                                </div> -->
                                            </div>
                                            <layout style="height: 81%;">
                                                <layout layout="aside" width="223px" style="vertical-align: middle">
                                                    <div class="bottomLabel">排期异常影院</div>
                                                    <div style="text-align:center;height:50px;line-height: 50px;margin-left:5px;color:#409EFF;font-weight: bold;">
                                                        <span style="font-size:48px;width:60%;display: inline-block;color:orange;">{{homeDtaSchedule.cinemaSum}}</span>家
                                                    </div>
                                                    <div class="bottomLabel">排期异常影厅</div>
                                                    <div style="text-align:center;height:50px;line-height: 50px;color:#409EFF;margin-left:5px;font-weight: bold;">
                                                        <span style="font-size:48px;width:60%;display: inline-block;">{{homeDtaSchedule.hallSum}}</span>个
                                                    </div>
                                                </layout>
                                                <layout layout="center"
                                                        style="padding:10px;border-radius: 12px;background: #F5F5F5;margin:15px;padding:36px 0;">
                                                    <table style="width:98%;height:100%;text-align:center;">
                                                        <tr style="height:40px;">
                                                            <td class="bottomTableHeader">今日异常</td>
                                                            <td class="bottomTableHeader">明日异常</td>
                                                            <td class="bottomTableHeader">后日异常</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="bottomTableCell" style="color:orange;">{{homeDtaSchedule.newSum}}</td>
                                                            <td class="bottomTableCell" style="color:#409EFF;">{{homeDtaSchedule.tomorrowSum}}</td>
                                                            <td class="bottomTableCell" style="color:#409EFF;">{{homeDtaSchedule.afterTomorrowSum}}</td>
                                                        </tr>
                                                    </table>
                                                </layout>
                                            </layout>
                                        </div>
                                    </el-col>
                                </el-row>
                            </layout>
                        </layout>
                    </layout>
                </layout>
            </layout>
        </layout>
    </section>
</template>

<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import Service from './home.service'
    import moment from 'moment';
    import mockData from '@/mock/data/mockData';
   /* import * as echarts from 'echarts/core';
    import { GridComponent } from 'echarts/components';
    import { BarChart } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';

    echarts.use([GridComponent, BarChart, CanvasRenderer]);*/

    import echarts from 'echarts';
    import "echarts/map/js/china.js";
    import "echarts/extension-src/bmap/bmap.js";

    Component.registerHooks([
        'beforeRouteEnter',
        'beforeRouteLeave',
        'beforeRouteUpdate'
    ]);
    @Component
    export default class AppHome extends Vue {
        windowHeight = 700;
        windowWidth = 1800;
        mapWidth = 100;
        mapHeight = 500;
        echartsData = {};
        echartsOption = {};
        loading=false;
        timer=null;
        geoCoordMap = {
            // '北京影院': [116.46, 39.92],
            // '海门影院': [121.15, 31.89],
            // '鄂尔多斯影院': [109.781327, 39.608266],
            // '招远影院': [120.38, 37.35],
            // '舟山影院': [122.207216, 29.985295],
            // '齐齐哈尔影院': [123.97, 47.33],
            // '盐城影院': [120.13, 33.38],
            // '赤峰影院': [118.87, 42.28],
        };
        data = [
            // { name: '北京影院', value: 8,onLine:false },
            // { name: '海门影院', value: 8,onLine:false },
            // { name: '鄂尔多斯影院', value: 8 ,onLine:false},
            // { name: '招远影院', value: 8 ,onLine:false},
            // { name: '舟山影院', value: 8,onLine:true },
            // { name: '齐齐哈尔影院', value: 8,onLine:true },
            // { name: '盐城影院', value: 8,onLine:true },
            // { name: '赤峰影院', value: 8 ,onLine:true},
        ];
        homeDta = {};
        homeDtaSchedule= {};
        malfunction= {};
        mapCenter = [116.46, 39.92];
        mapZoom = 5;
        
        constructor() {
            super();
        }

        dateFormat(row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return "";
            }
            return moment(date).format("YYYYMMDD");
        };
        
        showMap(){
            let option = this.getOptions(this.data);
            let myChart = echarts.init(this["$refs"]["mapEcharts"]);
            myChart.setOption(option);
        }
        
        getOptions(data) {
            //console.log(data)
            let _this=this
            this.echartsOption = {
                title: {
                    text: '',
                    subtext: '',
                    sublink: '',
                    left: 'center'
                },
                tooltip: {
                    triggerOn: 'mousemove',
                    //  trigger: 'item',
                    enterable: true,
                    hideDelay: 4000,
                    formatter: function (params) {
                        console.log(params)
                        // let result = this
                        window.localStorage.setItem('findByPropertyCode',JSON.stringify(params.data))
                        var API_AD = window.location.host
                        // window.open(API_AD+'/watch/cinemaWatchDetail',_self)
                        
                        let myChart = echarts.init(_this["$refs"]["mapEcharts"]);
                        myChart.on('click',function() {
                            _this.$router.push({
                                path:'/watch/cinemaWatchDetail',
                                name:'影厅监控详情',
                            })
                        });
                        let result = '<div style="pointer-events: all;"><span style="font-size:16px;font-weight: bold;margin:10px;">' + params.data.name + '</span><br>';
                        if (params.data.online) {
                            if ((params.data.tmsScheduleSum>0&&params.data.workOrderSum>0) || (params.data.workOrderSum>0)) {
                                result += '有' + params.data.workOrderSum + '个故障<br>';
                                if (params.data.tmsScheduleSum) {
                                    result += '有' + params.data.tmsScheduleSum + '个排期异常';
                                }
                                // result += `<br><input type="button" value="故障监控" onclick="clickEvent(` + params.data.id + `,1)">`;
                                return result;
                            }
                            if (params.data.tmsScheduleSum>0) {
                                if (params.data.tmsScheduleSum) {
                                    result += '有' + params.data.tmsScheduleSum + '个排期异常';
                                }
                                // result += `<br><input type="button" value="排期监控" onclick="clickEvent(` + params.data.id + `,0)">`;
                                return result;
                            }
                            return result += '影院工作正常';
                        } else {
                            return result += 'TMS系统离线中';
                        }
                    }
                },
                bmap: {
                    center: this.mapCenter,
                    zoom: this.mapZoom,
                    roam: true,
                   /* mapStyle: {
                        styleJson: [{
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'land',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#f3f3f3'
                            }
                        }, {
                            'featureType': 'railway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#fdfdfd'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'poi',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'green',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'subway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'local',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'boundary',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'building',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'label',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#999999'
                            }
                        }]
                    }*/
                },
                series: [
                    {
                        name: '不在线',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                         data: this.convertData(data),
                        symbolSize: function (val) {
                            return 8;
                        },
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                              normal: {
                                color:function(params){  //根据不同数据显示不同颜色的标记
                                    // return '#f4e925'
                                    if (params.data.online) {
                                        if ((params.data.tmsScheduleSum>0&&params.data.workOrderSum>0) || (params.data.workOrderSum>0&&params.data.tmsScheduleSum==0)) {
                                           return 'red';
                                        }
                                        if (params.data.tmsScheduleSum>0&&params.data.workOrderSum==0) {
                                            return 'orange';
                                        }
                                        // if (params.data.workOrderSum>0) {
                                        //     return 'red';
                                        // }
                                    } else {
                                        return 'gray';
                                    }
                                      return 'green';
                                },
                                
                            // color: 'gray',
                            // color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#69AFEE'
                        },
                        },
                        zlevel: 1
                    }
                ]
            };
            return this.echartsOption;
        }
        
        convertData(data){
            var res = [];
            if(data.length>0) {
                for (var i = 0; i < data.length; i++) {
                    //console.log(data[i])
                    var geoCoord = this.geoCoordMap[data[i].name];
                    // var online = this.data[data[i].online];
                    // //console.log(data[i].onLine,data[i])
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            online: this.data[i].onLine,
                            cinemaCode:data[i].cinemaCode,
                            workOrderSum:data[i].workOrderSum,
                            tmsScheduleSum:data[i].tmsScheduleSum
                        });
                    }
                }
                return res;
            }
            // var res = [];
            // //console.log(this.geoCoordMap)
            //     for (var i = 0; i < data.length; i++) {
            //        var geoCoord = this.geoCoordMap[data[i].name];
            //         // var online = this.data[data[i].online];
            //         //console.log(data[i].onLine,data[i])
            //         if (geoCoord) {
            //             res.push({
            //                 name: data[i].name,
            //                 value: geoCoord.concat(data[i].value),
            //                 online: this.data[i].onLine,
            //             });
            //         }
            //     }
            //     return res;
        }

        getBaiduMap() {
            return new Promise(function(resolve, reject) {
                window.init = function() {
                    resolve(BMap)
                }
                var script = document.createElement('script')
                script.type = 'text/javascript'
                script.src = `http://api.map.baidu.com/api?v=3.0&ak=`+window.process.config.ak+`&callback=init`
                script.onerror = reject
                document.head.appendChild(script)
            })
        }
        percentage(row) {

            if((row.notOnLineCount!=0&&row.notOnLineCount != undefined)||(row.onLineCount!=0&&row.onLineCount != undefined)) {
                let time1 = parseInt(row.notOnLineCount) + parseInt(row.onLineCount)
                return ((parseInt(row.onLineCount) / time1) * 100).toFixed(2) 
            }else if(row.onLineCount == 0&&row.notOnLineCount == 0) {
                return 0
            } else{
                return 0
            }
        }
        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            // this.mapWidth =  (this.windowWidth - 300)*2/3;
            // this.mapHeight =  (this.windowHeight - 415);
        }

        goSchedulesList(){
            this.$router.push({
                path: '/watch/schedulesWatch',
                name: '排期监控',
            })
        }
        
        goTroubleList(){
            this.$router.push({
                path: '/watch/troubleWatch',
                name: '故障监控',
            })
        }

        goCinemaList(){
            this.$router.push({
                path: '/cinema/cinemaList',
                name: '影院信息',
            })
        }

        goCinemaHallList(){
            this.$router.push({
                path: '/cinema/cinemaHallList',
                name: '影厅信息',
            })
        }

        goCinemaDeviceList(row){
            //console.log(row)
            this.$router.push({
                path: '/cinema/cinemaDeviceList',
                name: '设备信息',
                params:{name:row}
            })
        }

        goTmsList(row){
            this.$router.push({
                path: '/watch/tmsStatusWatch',
                name: 'TMS状态监控',
                 params:{name:row}
            })
        }
        home() {
            
             Service.home({}).then(res => {
                 if(res.data.succeeded) {
                    
                     if(res.data.data.constructor !== Array) {
                         this.homeDta = res.data.data
                         this.data  = res.data.data
                         this.homeDtaSchedule = res.data.data.schedule;
                         this.malfunction = res.data.data.malfunction;
                     }
                    

                 } else {
                     this.loading = false;
                 }
            })
        }
        mounted() {
//            this.getFile();
            const me = this;
            this.home();
            
            this.timer = setInterval(() => {
                this.home();
            }, 30000);
    
            me.$nextTick(()=>{
                me.homeMap()
                me.getBaiduMap().then(BMap => {
                    me.showMap()
                })
            })
            
        };
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        };
        deactivated() {
            clearInterval(this.timer);
            this.timer = null;
        };
        homeMap(){
            const me = this;
            me.loading = true;
            Service.homeMap().then(res=>{
                if(res.data.succeeded) {
                    let name = '';
                    me.data = []
                    me.geoCoordMap = res.data.mapData;
                    if(res.data.data.length>0) {
                        
                        for(let item of res.data.data) {
                            // //console.log(item)
                            // //console.log(me.data)
                            name=item.cinemaNameCn
                            // //console.log(name)
                            me.data.push({'name':item.cinemaNameCn,'value':8,'onLine':item.onLine,cinemaCode:item.cinemaCode,workOrderSum:item.workOrderSum == null?0:item.workOrderSum,tmsScheduleSum:item.tmsScheduleSum== null?0:item.tmsScheduleSum,}) 
                            //console.log( me.data)
                            me.$nextTick(()=>{
                            me.getBaiduMap().then(BMap => {
                                me.showMap()
                            })
                    })
                    } 
                    me.loading = false;
                    } else{
                        me.loading = false;
                         me.getBaiduMap().then(BMap => {
                            me.showMap()
                        })
                    }
                }
            })
        }
        created() {
            const me = this;
            me.resizeEvent();
            // me.homeMap()
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
    }
</script>

<style lang="scss" scoped>
.titleContainer{
        width:100%;text-align: left;padding-left:10px;font-weight: bold;height:50px;line-height:50px;vertical-align: baseline;
        padding:10px 0 0 20px;box-sizing: border-box;
            // padding-top: 10px;
       .titleText{
            vertical-align: top;
            font-size: 19px;
            margin-left: 15px;
            // margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;
        }
        >img{
            width:30px;
            height:30px;
            margin-top: 13px;
        }
    }
    .titleValue{
        text-align: center;
        // height:176px;line-height: 157px;
        position: relative;
            height: 80%;
        .titleValue_cen {
            position: absolute;
            top: 40%;
            left: 50%;
            transform:translate(-50%, -50%);
        }
        .titleNumber{
            color:#409EFF;font-size:48px;font-weight: bold;margin:10px;cursor: pointer;
        }
        .titleUnit{
            color:#444;font-size:16px;font-weight: bold;
        }
    }
    
    .titleContainer2{
        margin-top:10px;text-align: left;height:40px;line-height: 40px;
        // margin-left:10px;
        .titleLabel{
            // color:#444;font-size:18px;font-weight: bold;
            font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #666666;
line-height: 21px;
        }
        .titleNumber{
            margin:10px;color:#409EFF;font-size:30px;font-weight: bold;cursor: pointer;
        }
        .titleUnit{
            color:#444;font-size:16px;font-weight: bold;
            margin-left: 10px;
        }
    }
    
    .bottomLabel{
        text-align:center;height:45px;line-height: 45px;color:#666;font-size:16px;font-weight: bold;
    }
    .bottomTableHeader{
        width:30%;
        // font-weight: bold;color:#666;
        border-right: 2px solid #D8D8D8;
        // vertical-align: bottom;
height: 21px;
font-size: 19px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #666666;
line-height: 21px;
    }
    .bottomTableHeader:last-child {
        border-right: none;
    }
    .bottomTableCell{
        vertical-align:middle;padding-bottom:20px;font-weight:bold;font-size:48px;border-right:2px solid #D8D8D8;
    }
     .bottomTableCell:last-child {
        border-right: none;
    }
    .btnDetail{
       font-weight:bold;float:right;margin-right:10px;
        cursor: pointer;
    }
    .el-button.is-round {
        padding: 8px 14px 11px 17px;
        font-size: 14px;
        color: #333333;
        border-color: snow;
        background: #B9DCFF linear-gradient(180deg, rgba(214, 228, 235, 0.1) 0%, #77A8CC 47%, rgba(183, 200, 218, 0) 100%);
    }
    /deep/ .el-progress-circle {
        width: 108px;
    }
    .cinemaImg {
       width: 25px !important;
       height: 25px !important;
   }
   /deep/ .el-progress--circle,  /deep/.el-progress--dashboard,/deep/ .el-progress-circle {
       height: 100% !important;
       display: flex;
       justify-content: center;
   }
   /deep/ .el-progress-circle {
       height: 100px !important;
       width: 100px !important;
       margin: auto;
       svg {
           height: 100%;
       }
   }
   .shadowPanel {
       .img {
           display: flex;
           img {
               display: flex;
                align-items: center;
                margin: auto;
           }
       }
   }

 @media only screen and (max-width: 1745.45px){
     .el-footer {
           height: 36% !important;
       }
 }
  @media only screen and (max-width: 1536px){
     .el-footer {
           height: 42% !important;
       }
       .shadowPanel .img {
           height:35% !important;
       }
     /deep/  .el-progress-circle {
    height: 80px !important;
    width: 80px !important;
}
 }
 @media only screen and (max-width: 1280px) {
     .dataNameLeft {
         height: 333px !important;
     }
     .el-header {
         height: 126px !important;
     }
       .dataName {
           height: 98%;
           .mapEcharts {
               height: 86% !important;
               padding-top: 0px !important;
           }
       }
       section .noScrollSection {
    overflow: initial !important;
    // height: 100%;
}
       .el-footer {
           height: 38% !important;
       }
       .mainSection {
           min-width: 800px !important;
       }
    .titleContainer{
        width:100%;text-align: left;font-weight: bold;height:2rem;line-height:2rem;vertical-align: baseline;
        
    padding: 0.1rem 0 0 .5rem;box-sizing: border-box;
    
            // padding-top: 10px;
       .titleText{
            vertical-align: top;
            font-size: 0.2rem;
            margin-left: 0.2rem;
            // margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;
        }
        >img{
            width:1rem !important;
            height:1rem !important;
            margin-top: 0.5rem;
        }
    }
    .titleValue{
        text-align: center;
        // height: 4rem;
    // line-height: 4rem;
        .titleNumber{
            color:#409EFF;font-size:1.5rem;font-weight: bold;margin:10px;cursor: pointer;
        }
        .titleUnit{
            color:#444;font-size:.2rem;font-weight: bold;
        }
    }
    
    .titleContainer2{
        margin-top:10px !important;text-align: left;height:1rem;line-height: 1rem;
        // margin-left:10px;
        .titleLabel{
            // color:#444;font-size:18px;font-weight: bold;
            font-size: .2rem;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #666666;
line-height: 21px;
margin-left: 1rem !important;
        }
        .titleNumber{
            margin:5px 2px;color:#409EFF;font-size:1rem;font-weight: bold;cursor: pointer;
        }
        .titleUnit{
            color:#444;font-size:.2rem;font-weight: bold;
            margin-left: 10px;
        }
    }
    
    .bottomLabel{
        text-align:center;height:2rem;line-height: 2rem;color:#666;font-size:.2rem;font-weight: bold;
    }
    .bottomTableHeader{
        width:30%;
        // font-weight: bold;color:#666;
        border-right: 0.1rem solid #D8D8D8;
        // vertical-align: bottom;
height: 21px;
font-size: .5rem;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #666666;
line-height: 21px;
    }
    .bottomTableHeader:last-child {
        border-right: none;
    }
    .bottomTableCell{
        vertical-align:middle;padding-bottom:0;font-weight:bold;font-size:1.5rem;border-right:0.1rem solid #D8D8D8;
    }
     .bottomTableCell:last-child {
        border-right: none;
    }
    /deep/ table {
        height: 60% !important;
        margin-top: 1rem !important;
        /deep/ tr {
            height: auto !important;
        }
    }
    .btnDetail{
       font-weight:bold;float:right;margin-right:10px;
        cursor: pointer;
    }
    .el-button.is-round {
        padding: 3px 6px 4px 9px;
        font-size: .2rem;
        color: #333333;
        border-color: snow;
        background: #B9DCFF linear-gradient(180deg, rgba(214, 228, 235, 0.1) 0%, #77A8CC 47%, rgba(183, 200, 218, 0) 100%);
            margin-top: 4px;
    }
    .is-vertical {
        height: 100%;
    }
    .shadowPanel {
        .el-container {
            height: 77% !important;
            /deep/ .el-main {
                padding: 0.5rem !important;
                margin:  0.5rem !important;
            }
            /deep/ .el-aside {
                width: 8rem !important;
                div {
                    height:1.8rem !important;line-height: 1.8rem !important;
                }
                span {
                    font-size: 1.5rem !important;
                    // display: none !important;
                }
            }
        }
    }
    /deep/ .el-progress-circle {
        width: 108px;
    }
    .cinemaImg {
       width: 25px !important;
       height: 25px !important;
   }
   /deep/ .el-progress--circle,  /deep/.el-progress--dashboard,/deep/ .el-progress-circle {
       height: 100% !important;
       display: flex;
       justify-content: center;
   }
   /deep/ .el-progress-circle {
       height: 100% !important;
       width: 100% !important;
       margin: auto;
       svg {
           height: 100%;
       }
   }
   .shadowPanel {
       .img {
           display: flex;
           height: 40% !important;
           img {
               height: 100%;
               display: flex;
                align-items: center;
                margin: auto;
           }
       }
   }
}
</style>